<template>
  <div class="main-wrapper">
    <transition name="el-fade-in-linear">
      <div class="normal-player" v-if="songInfo.picUrl">
        <div class="background">
          <img :src="songInfo.picUrl" alt="" />
        </div>
      </div>
    </transition>
    <div class="main-box">
      <div class="shadow-box">
        <div class="menu-box">
          <Menu @handleClick="menuClick" />
        </div>
        <div class="chart-box" @click="hiddenBox">
          <Chat @handleClickOnline="menuClick" />
        </div>
        <transition name="zoomPanel">
          <div class="right-box" v-show="showRight">
            <i class="el-icon-close" @click="hiddenBox"></i>
            <transition name="el-fade-in-linear">
              <component class="component" :is="currentRightComponent" v-if="componentShow" />
            </transition>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import SearchSong from './sections/SearchSong'
import OrderSongList from './sections/OrderSongList'
import Menu from './sections/Menu'
import User from './sections/User'
import Chat from './sections/Chat'
import UserList from './sections/UserList'
import NewSong from './sections/NewSong'
import MusicInfo from './sections/MusicInfo'
import OrderHistory from './sections/OrderHistory'
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    SearchSong,
    OrderSongList,
    Menu,
    User,
    Chat,
    UserList,
    NewSong,
    MusicInfo,
    OrderHistory
  },
  setup() {
    const store = useStore()
    let songInfo = computed(() => {
      return store.getters.songInfo
    })
    let cardShow = computed(() => {
      return store.getters.cardShow
    })
    let currentRightComponent = ref('SearchSong')
    let showRight = ref(false)
    let componentShow = ref(false)
    watch(cardShow, (n, o) => {
      if (!n) {
        hiddenBox()
      }
    })

    const delay = () => {
      componentShow.value = false
      setTimeout(() => {
        componentShow.value = true
      }, 200)
    }
    const menuClick = data => {
      console.log(data)
      switch (data) {
        case '点歌':
          currentRightComponent.value = 'SearchSong'
          delay()
          break
        case '已点':
          currentRightComponent.value = 'OrderSongList'
          delay()
          break
        case '用户':
          currentRightComponent.value = 'User'
          delay()
          break
        case '最新':
          currentRightComponent.value = 'NewSong'
          delay()
          break
        case '用户列表':
          currentRightComponent.value = 'UserList'
          delay()
          break
        case '音乐':
          currentRightComponent.value = 'MusicInfo'
          delay()
          break
        case '历史':
          currentRightComponent.value = 'OrderHistory'
          delay()
          break
      }
      showRight.value = true
    }
    const hiddenBox = () => {
      componentShow.value = false
      showRight.value = false
    }
    return {
      currentRightComponent,
      componentShow,
      showRight,
      songInfo,
      menuClick,
      hiddenBox
    }
  }
}
</script>
<style lang="scss" scoped>
.main-wrapper {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 0;
  background: url('../../assets/images/Nixeu4K(2).png');
  background-size: cover;
  .normal-player {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: #222;
    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.6;
      filter: blur(20px);
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  @media screen and (max-width: 900px) {
    .main-box {
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
    }
  }
  @media screen and (max-height: 600px) {
    .main-box {
      left: 5% !important;
      right: 5% !important;
      top: 0 !important;
      bottom: 0 !important;
    }
  }
  .main-box {
    position: fixed;
    left: 14%;
    right: 14%;
    top: 8%;
    bottom: 8%;
    border-radius: 10px;
    min-height: 460px;
    .shadow-box {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      left: 0;
      border-radius: 10px;
      overflow: hidden;
      .menu-box {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80px;
        // background-color: #333;
        background-color: rgb(51 51 51 / 59%);
        text-align: center;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
      }
      .chart-box {
        position: absolute;
        left: 80px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: hsla(0, 0%, 100%, 0.59);
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;
      }
      .right-box {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        width: 25%;
        min-width: 360px;
        text-align: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        background-color: #f5f5f5;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;
        .component {
          height: 100%;
        }
        .el-icon-close {
          position: absolute;
          padding: 10px;
          top: 0;
          right: 0;
          z-index: 200;
          cursor: pointer;
          display: none;
          color: #d93f30;
        }
        @media screen and (max-width: 420px) {
          &.right-box {
            width: 100%;
          }
          .el-icon-close {
            display: inline;
          }
        }
      }
    }
  }
}
</style>
